<template>
  <yd-layout>
    <div class="identify-header" v-if="headerState"></div>
    <slot name="header"></slot>
    <slot name="main">这是主要内容</slot>
    <slot name="footer"></slot>
    <!-- 默认底部导航 -->
    <yd-tabbar slot="tabbar" v-if="footerState">
      <yd-tabbar-item
        :active-color="activeColor"
        :title="item.title"
        :link="item.link"
        v-for="(item,index) in nav"
        :key="index"
      >
        <img
          slot="icon"
          style="height: 0.44rem;"
          :src="isSlectTitle == item.routerName ? item.selectedImg : item.defaultImg"
        >
      </yd-tabbar-item>
    </yd-tabbar>
  </yd-layout>
</template>
<script>
export default {
  props: {
    state: {
      type: Boolean
    },
    footerState: {
      type: Boolean,
      default: true
    },
    headerState: {
      type: Boolean
    }
  },
  data() {
    return {
      isSlectTitle: "index",
      activeColor: "#ff5355",
      nav: [
        {
          title: "首页",
          link: "/",
          routerName: "index",
          defaultImg: require("../../assets/icon_shouye_shouye_n.png"),
          selectedImg: require("../../assets/icon_shouye_shouye_s.png")
        },
        {
          title: "报表",
          link: "/charts",
          routerName: "charts",
          defaultImg: require("../../assets/icon_shouye_baobiao_n.png"),
          selectedImg: require("../../assets/icon_shouye_baobiao_s.png")
        },
        {
          title: "我的",
          link: "/my",
          routerName: "my",
          defaultImg: require("../../assets/icon_shouye_wode_n.png"),
          selectedImg: require("../../assets/icon_shouye_wode_s.png")
        }
      ]
    };
  },
  mounted() {
    this.isSlectTitle = this.$route.name;
  }
};
</script>
<style>
.yd-tabbar-item .yd-tabbar-txt {
  font-size: 0.18rem;
  color: #818181;
  margin-top: 2px;
}
.yd-tabbar-item.router-link-exact-active .yd-tabbar-txt {
  color: #ff5355;
}
.yd-tabbar-item {
  height: 1rem !important;
}
</style>

